<!--  -->
<template>
  <div class="order-item">
    <div class="order-head flex-a-c flex-j-sb" v-if="sellType === 1">
      <div class="sn">{{ sellItem.examine_time_str }}</div>
    </div>
    <div class="order-head flex-a-c flex-j-sb" v-else>
      <div class="sn">订单编号：{{ sellItem.order_sn }}</div>
      <div class="state">{{ sellItem.status_name }}</div>
    </div>

    <div class="card-wrap flex">
      <div class="img">
        <img :src="sellItem.order_goods && sellItem.order_goods.thumb" />
      </div>
      <div class="card-main flex">
        <div class="flex-j-sb ">
          <div class="name ell">{{ sellItem.order_goods && sellItem.order_goods.title }}</div>
        </div>
        <div class="flex-a-c">
          <div class="price">
            ￥<span>{{ sellItem.order_goods && sellItem.order_goods.price }}</span>
          </div>
          <div class="shop-pay flex-a-c flex-j-c">到店付</div>
          <div class="discount-price">
            ￥<span>{{ sellItem.offline_price }}</span>
          </div>
        </div>
      </div>
    </div>
    <slot></slot>
    <div class="flex-a-c flex-j-sa number-use">
      <div v-if="sellType === 1">核销员：{{ sellItem.clerk && sellItem.clerk.nickname }}</div>
      <div>总次数：{{ sellItem.sum_count }}</div>
      <div v-if="sellType === 2">已使用：{{ sellItem.use_count }}</div>

      <div>未使用：{{ sellItem.rest_count }}</div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  name: "",
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    sellItem: {
      type: Object,
      default: () => {
        return {};
      }
    },
    sellType: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入公共css类 */
.ell {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  /* 定义显示的行数 */
  overflow: hidden;
}

.order-item {
  background-color: #fff;
  border-radius: 0.3125rem;
  padding: 0.8438rem 0.8125rem 0.75rem 0.8125rem;
  margin-bottom: 0.625rem;
}

.order-head {
  margin-bottom: 0.8125rem;

  .sn {
    font-size: 0.75rem;
    color: #666;
  }

  .state {
    font-size: 0.875rem;
    color: #ff3a00;
  }
}

.card-wrap .img {
  width: 4.375rem;
  height: 4.375rem;
  margin: 0 0.5938rem 0 0;

  img {
    width: 4.375rem;
    height: 4.375rem;
  }
}

.card-main {
  flex-direction: column;
  justify-content: space-between;

  .name {
    font-size: 0.875rem;
    font-weight: bold;
    color: #222;
  }

  .attribute {
    margin: 0.5rem 0 0 0;
    font-size: 0.7163rem;
    color: #979797;
  }
}

.attribute .num {
  margin: 0 1.9375rem 0 0;
}

.card-main {
  .price,
  .discount-price {
    font-size: 0.6875rem;
    color: #ff3a00;
    font-weight: 500;
  }

  .price span,
  .discount-price span {
    font-size: 1rem;
  }

  .shop-pay {
    // width: 2.125rem;
    // height: 0.8438rem;
    // line-height: 0.8438rem;
    // border-radius: 0.1563rem;
    // text-align: center;
    // background-color: #ff4000;
    // font-size: 0.625rem;
    // color: #ffffff;
    // margin: 0 0.25rem 0 1.75rem;
    // width: 2.125rem;
    padding: 1px 4px;
    // height: 0.8438rem;
    border-radius: 0.1563rem;
    text-align: center;
    background-color: #ff4000;
    font-size: 0.625rem;
    color: #fff;
    margin: 0 0.25rem 0 1.75rem;
  }
}

.order-item .number-use {
  font-size: 0.75rem;
  color: #222;
  margin-top: 0.8125rem;
}
</style>
